<template>
  <div>
    <Jdd-Card :padding="15" style="margin-bottom:16px;">
      <div style="font-size: 16px;font-weight:600;">高级表单</div>
      <div
        style="margin-top:12px;"
      >高级表单常见于一次性输入和提交大批量数据的场景。这种表单往往一屏不够，并且与列表或者弹窗等其他组件进行搭配，形成以表单为主的复合页面。</div>
    </Jdd-Card>
    <Jdd-Card :padding="15">
      <div>
        <div style="display:flex;margin-bottom:15px;align-items:center;">
          <Jdd-Icon type="icon-basicInformation" size="18" />
          <span style="font-size:16px;font-weight:600;margin-left:5px;">基础信息</span>
        </div>
        <Form
          :model="seniorForm"
          :label-width="90"
          :label-colon="true"
          :rules="ruleValidate"
          ref="seniorForm"
        >
          <FormItem label="插件分组" prop="componentType">
            <Jdd-Select
              v-model="seniorForm.componentType"
              :option="componentTypeList"
              label-name="text"
              value-name="code"
              style="width:340px;"
            ></Jdd-Select>
          </FormItem>
          <FormItem label="上传插件" prop="componentUrl">
            <div style="display:flex;">
              <Upload
                v-model="componentUrl"
                style="width:340px;"
                multiple
                type="drag"
                action="//jsonplaceholder.typicode.com/posts/"
              >
                <div style="padding: 20px 0">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>Click or drag files here to upload</p>
                </div>
              </Upload>
              <Tooltip :theme="theme==='white'?'light':'dark'" placement="right">
                <Jdd-Icon type="md-help-circle" size="18" style="margin-left:10px;" />
                <div
                  slot="content"
                  style="width:190px;height:90px;white-space:normal;padding:2px;line-height:24px;font-size:14px;"
                >
                  <div>1、插件支持格式</div>
                  <div>2、插件大小不超过</div>
                  <div>3、不支持添加多个文件</div>
                </div>
              </Tooltip>
            </div>
          </FormItem>
          <FormItem label="插件名称" prop="name">
            <Jdd-Input style="width:340px;" v-model.trim="seniorForm.name" placeholder="请输入插件名称" />
          </FormItem>
          <FormItem label="插件描述" prop="desc">
            <Jdd-Input style="width:340px;" v-model.trim="seniorForm.desc" placeholder="请输入插件描述" />
          </FormItem>
          <FormItem label="操作系统">
            <RadioGroup style="width:340px;" v-model="seniorForm.system">
              <Radio label="Linux">Linux</Radio>
              <Radio label="Windows">Windows</Radio>
            </RadioGroup>
          </FormItem>
          <Divider />

          <div style="display:flex;margin-bottom:15px;align-items:center;">
            <Jdd-Icon type="icon-basicInformation" size="18" />
            <span style="font-size:16px;font-weight:600;margin-left:5px;">附加人信息</span>
          </div>
          <div v-for="(item,index) in seniorForm.contacts" :key="'contact'+index">
            <FormItem
              label="联系人"
              :prop="'contacts.' + index + '.contactor'"
              :rules="{required: true, message: '联系人 ' + index +' 不能为空', trigger: 'blur'}"
            >
              <div style="display:flex;align-items:center;">
                <Jdd-Input style="width:340px;" v-model.trim="item.contactor" placeholder="请输入联系人" />
                <a
                  href="javascript:;"
                  @click="removeContactClick(index)"
                  style="margin-left:10px;"
                >删除</a>
              </div>
            </FormItem>
            <FormItem label="基本信息">
              <Jdd-Input style="width:340px;" v-model.trim="item.base" placeholder="请输入" />
            </FormItem>
            <FormItem label="邮箱">
              <Jdd-Input
                style="width:340px;"
                v-model.trim="item.email"
                placeholder="请输入"
                type="email"
              />
            </FormItem>
            <Divider v-if="index<seniorForm.contacts.length-1" dashed />
          </div>
          <div style="margin-left:80px">
            <a href="javascript:;" @click="addContactClick">
              <Jdd-Icon type="md-add" size="16" style="margin-right:5px;" />添加附加联系人
            </a>
          </div>

          <Divider />

          <div style="display:flex;margin-bottom:15px;align-items:center;">
            <Jdd-Icon type="icon-basicInformation" size="18" />
            <span style="font-size:16px;font-weight:600;margin-left:5px;">运行范围</span>
          </div>
          <div v-for="(item,index) in seniorForm.configs" :key="'config'+index">
            <FormItem
              label="配置类型"
              :prop="'configs.' + index + '.configType'"
              :rules="{required: true, message: '配置类型 ' + index +' 不能为空', validator:validatorConfigType}"
            >
              <div style="display:flex;align-items:center;">
                <Jdd-Select
                  style="width:340px;"
                  v-model="item.configType"
                  :option="configTypeList"
                  label-name="text"
                  value-name="code"
                ></Jdd-Select>
                <a
                  href="javascript:;"
                  @click="removeConfigClick(index)"
                  style="margin-left:10px;"
                >删除</a>
              </div>
            </FormItem>
            <FormItem label="配置描述">
              <Jdd-Input style="width:340px;" v-model.trim="item.email" placeholder="请输入" />
            </FormItem>
            <FormItem label="触发频率">
              <div style="display:flex;align-items:center;">
                <Jdd-Select style="width:150px;" v-model="item.configRate" :option="configRateList"></Jdd-Select>
                <Jdd-Input
                  style="width:150px;margin-left:10px;"
                  :disabled="item.configRate!=='0'"
                  v-model.trim="item.configeEpression"
                  placeholder="请输入定时表达式"
                />
                <Jdd-Input
                  style="width:150px;margin-left:10px;"
                  v-model.trim="item.configeTimeOut"
                  placeholder="请输入超时"
                />
                <Jdd-Input
                  style="width:150px;margin-left:10px;"
                  v-model.trim="item.configeParam"
                  placeholder="请输入启动参数"
                />
                <Tooltip :theme="theme==='white'?'light':'dark'">
                  <Jdd-Icon type="md-help-circle" size="18" style="margin-left:10px;" />
                  <div
                    slot="content"
                    style="width:220px;height:160px;white-space:normal;padding:2px;line-height:24px;font-size:14px;"
                  >
                    <div>触发频率：可自定义，解释解释解释解释解释解释解释解释解释解释解释解释。</div>
                    <div>启动参数：解释解释解释解释解释解释解释解释解释解释解</div>
                    <div>超时：解释解释解释解释</div>
                  </div>
                </Tooltip>
              </div>
            </FormItem>
            <Divider v-if="index<seniorForm.configs.length-1" dashed />
          </div>
          <div style="margin-left:80px">
            <a href="javascript:;" @click="addConfigClick">
              <Jdd-Icon type="md-add" size="16" style="margin-right:5px;" />添加运行范围
            </a>
          </div>
          <Divider />

          <div style="display:flex;margin-bottom:15px;align-items:center;">
            <Jdd-Icon type="icon-basicInformation" size="18" />
            <span style="font-size:16px;font-weight:600;margin-left:5px;">设置集群参数</span>
          </div>
          <!-- <FormItem prop="configDesc"> -->
          <Jdd-TablePage ref="dataTable" v-bind="baseTableData">
            <template slot-scope="props" slot="title1">
              <Jdd-Input
                style="min-width:150px;"
                v-model.trim="tableDataList[props.index].title1"
                placeholder="请输入标题一"
              />
            </template>
            <template slot-scope="props" slot="title2">
              <Jdd-Input
                style="min-width:150px;"
                v-model.trim="tableDataList[props.index].title2"
                placeholder="请输入标题二"
              />
            </template>
            <template slot-scope="props" slot="title3">
              <Jdd-Input
                style="min-width:150px;"
                v-model.trim="tableDataList[props.index].title3"
                placeholder="请输入标题三"
              />
            </template>
            <template slot-scope="params" slot="action">
              <Jdd-BtnDefault icon="icon-del" @click=" deleteTableColumns(params.index)"></Jdd-BtnDefault>
            </template>
          </Jdd-TablePage>
          <div
            style="border: 1px dashed #DDDDDD;margin-top: 10px;text-align: center;padding: 5px 0px;border-radius:2px;cursor: pointer;"
            @click="addTableData"
          >
            <Jdd-Icon type="md-add" size="16" style="margin-right:5px;" />新增集群
          </div>
          <div style="margin-top:15px;text-align:center;">
            <Jdd-BtnSubmit :form="'seniorForm'" @click="submitClick">提交</Jdd-BtnSubmit>
            <Jdd-BtnSubmit :form="'seniorForm'" :beforeClick="beforeClick">直接提交</Jdd-BtnSubmit>
            <Jdd-BtnReset :form="'seniorForm'"></Jdd-BtnReset>
          </div>
          <!-- </FormItem> -->
        </Form>
      </div>
    </Jdd-Card>
  </div>
</template>
<script>
import _ from 'lodash'
import { appAdd } from '../scripts/api'
const validatorConfigType = (rule, value, callback) => {
  if (!value) {
    callback(new Error('应用名称不能为空(前端验证)'))
  }
}
export default {
  name: 'seniorForm',
  data () {
    return {
      ruleValidate: {
        componentUrl: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请上传插件'))
              } else {
                callback()
              }
            }
          }
        ],
        name: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        componentType: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择插件类型'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      componentTypeList: [
        { code: '1', text: '基础插件' },
        { code: '2', text: '高级插件' }
      ],
      configTypeList: [
        { code: '1', text: 'Default' },
        { code: '2', text: 'YWID' }
      ],
      configRateList: [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '0', label: '自定义' }
      ],
      seniorForm: {
        componentType: '1',
        componentUrl: '',
        name: '',
        desc: '',
        system: 'Linux',
        contacts: [
          {
            contactor: '',
            baseInfo: '',
            email: ''
          }
        ],
        configs: [
          {
            configType: '',
            configDesc: '',
            configRate: '',
            configeEpression: '',
            configeTimeOut: '',
            configeParam: ''
          }
        ]
      },
      baseTableData: {
        showBanner: false,
        showPager: false,
        // autoLoad: false,
        tColumns: [
          {
            title: '标题一',
            key: 'title1',
            minWidth: 100,
            align: 'center',
            sortable: true,
            slot: 'title1'
          },
          {
            title: '标题二',
            key: 'title2',
            minWidth: 200,
            align: 'center',
            sortable: true,
            slot: 'title2'
          },
          {
            title: '标题三',
            key: 'title3',
            minWidth: 150,
            align: 'center',
            sortable: true,
            slot: 'title3'
          },
          {
            title: '操作',
            maxWidth: 150,
            align: 'center',
            slot: 'action'
          }
        ],
        tData: []
      },
      tableDataList: []
    }
  },
  computed: {
    theme () {
      return this.$store.state.theme
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    addContactClick () {
      this.seniorForm.contacts.push({
        contactor: '',
        baseInfo: '',
        email: ''
      })
    },
    removeContactClick (index) {
      this.seniorForm.contacts.splice(index, 1)
    },
    addConfigClick () {
      this.seniorForm.configs.push({
        configType: '',
        configDesc: '',
        configRate: '',
        configeEpression: '',
        configeTimeOut: '',
        configeParam: ''
      })
    },
    removeConfigClick (index) {
      this.seniorForm.configs.splice(index, 1)
    },
    deleteTableColumns (index) {
      this.baseTableData.tData.splice(index, 1)
      this.tableDataList.splice(index, 1)
      // this.getTableData()
    },
    getTableData () {
      this.baseTableData.tData = []
    },
    addTableData () {
      this.tableDataList.push({
        title1: '',
        title2: '',
        title3: ''
      })
      this.baseTableData.tData = _.cloneDeep(this.tableDataList)
      // this.baseTableData.tData = this.tableDataList //闪
    },
    submitClick (val, msgProxy) {
      if (val) {
        msgProxy(appAdd(this.seniorForm)).then(res => {})
      }
    },
    beforeClick () {
      this.$refs.seniorForm.validate(valid => {
        if (valid) {
          this.$sysMessageProxy(appAdd(this.seniorForm), '提交').then(res => {})
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>
